import React, { Component, Fragment, PureComponent } from 'react'


export default class GambleDashboard extends Component {
  constructor(props) {
    super(props)
    this.state = {
      userAmount: 203.36,//用户自己的总金额
      gambleAmount: '',//用户下注金额
      btnDisabled: true,
      touzhuAmount: [20, 50, 100, 500, 1000, '全部']
    }
  }

  componentDidMount() {
  }

  validatorNumber = (num) => {
    num = num.target.value.replace(/[^\d]/ig, '')
    this.setAmount(num)
  }
  setAmount = (amount) => {
    var userAmount=parseInt(this.state.userAmount)
    amount = parseInt(amount)
    if(amount>userAmount) amount=userAmount
    this.setState({ gambleAmount: amount }, () => {
      this.isBtnDisabled(amount)
    })
  }
  isBtnDisabled = (gambleAmount) => {
    //投注按钮是否可点击
    this.setState({ btnDisabled: !(parseInt(gambleAmount) > 0) })
  }
  shortcutAmount = (num) => {
    num = num === '全部' ? this.state.userAmount : num
    this.setAmount(num)
  }
  scrollScreen = (flag) => { 
    //如果一开始展现的页面不足一个屏幕高度，则弹出输入框再收缩后，按钮们会移形错位，用以下方法解决
    if (flag) {
      var odiv = document.createElement('div')
      odiv.style.height = "9999px"
      odiv.id = "scrollScreen20200320"
      document.body.appendChild(odiv)
    } else { 
      document.body.removeChild(document.getElementById('scrollScreen20200320'))
    }
  }

  render() {
    let { userAmount, gambleAmount, btnDisabled, touzhuAmount } = this.state
    return (
      <div>
        <div className="gamble-pop-wrap">
          <div className="gamble-center">
            <div>2020-1-22 上证指数</div>
            <div className="gamble-gold">看涨</div>
            <div className="gamble-gold">赔率 @1.91</div>
          </div>
        </div>
        <div className="yt yt-ac gamble-ipt-wrap">
          <span className="gamble-ipt-icon">¥</span>
          <input type="number" value={gambleAmount} onBlur={this.scrollScreen.bind(null,0)} onFocus={this.scrollScreen.bind(null,1)} onChange={this.validatorNumber} className="yt-f1 gamble-ipt" placeholder="投注额:10~50000" />
          <i className="alifont gamble-close-icon" onClick={() => { this.setState({gambleAmount:''})}}>&#xe7be;</i>
        </div>
        {touzhuAmount.map((v, k) => {
          if (k % 3 === 0) {
            return <div key={v} className="yt yt-pj gamble-usual-amount">{
              touzhuAmount.slice(k, k + 3).map((vv) => {
                return <div key={vv} className="gamble-item-amount" onClick={() => { this.shortcutAmount(vv) }}>{vv}</div>
              })
            }</div>
          }
        })}
        <div className="yt yt-pja gamble-detail">
          <div className="gamble-forecast">
            <div>预计收益</div>
            <div className="gamble-earn-num">¥12</div>
          </div>
          <div className="gamble-forecast">
            <div>可用</div>
            <div className="gamble-earn-num">¥{userAmount}</div>
          </div>
        </div>
        <button onClick={this.touzhu} className={["btn-touzhu", btnDisabled ? "c-disabled" : ""].join(' ')} disabled={btnDisabled}>投注</button>
      </div>
    )
  }
}